<template>
	<cl-dialog
		:title="`${user_name}-企业微信码详情`"
		width="800px"
		:visible.sync="visible"
		@close="close"
		:props="{
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<cl-data-table ref="table" v-bind="table" @selection-change="onSelectionChange">
			<template #column-content="{ scope: { row, $index } }">
				<el-checkbox-group
					:key="row.value"
					v-model="selectArr"
					@change="submit"
				>
					<el-checkbox :label="row">
						{{ row.content }}
					</el-checkbox>
				</el-checkbox-group>
			</template>
		</cl-data-table>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<!-- <el-button type="primary" :loading="saving" @click="submit">确定</el-button> -->
		</template>
	</cl-dialog>
</template>
<script>
	export default {
		props: {
			selArr: {
				type: Array
			}
		},
		data() {
			return {
				visible: false,
				// query: {},
				selectArr: [],
				user_name: "",
				table: {
					data: [],
					showPage: false,
					props: {
						maxHeight: 500
					},
					columns: [
						// { label: "选择", type: "selection", minWidth: 50, fixed: true },
						{
							label: "企业码",
							prop: "content",
							minWidth: 200,
							align: "left",
							showOverflowTooltip: true
						},
						{
							label: "行为",
							prop: "copy",
							minWidth: 100
						},
						{
							label: "加微",
							prop: "jiawei",
							minWidth: 100
						},
						{
							label: "落地页",
							prop: "ad_ldy",
							minWidth: 100
						},
						{
							label: "城市",
							prop: "ad_city",
							minWidth: 100
						},
						{
							label: "公众号",
							prop: "ad_gzh",
							minWidth: 100
						}
					]
				}
			};
		},
		methods: {
			open(data = {}, user_name) {
				console.info("data", data);
				this.visible = true;

				this.user_name = user_name
				// return false
				// this.query = data;
				this.table.data = data?.type_value ?? [];

				this.selectArr = this.selArr
				// this.$nextTick(() => {
				// 	this.toggleSelection(this.selArr);
				// });
			},
			close() {
				this.visible = false;
				this.user_name = ''
				this.selectArr = []
			},
			submit(e) {
				console.info("this.selArr", this.selArr);
				console.info("e", e);

				this.$emit('update:selArr', this.selectArr)
				// this.$emit("confirm");
			},
			// getSelectArr() {
			// 	const selArr = [];
			// 	this.selectArr.forEach((e) => {});
			// },
			// toggleSelection(rows) {
			// 	if (rows) {
			// 		rows.forEach((row) => {
			// 			this.$refs.table.toggleRowSelection(row);
			// 		});
			// 	} else {
			// 		this.$refs.table.clearSelection();
			// 	}
			// },
			onSelectionChange(e) {
				console.info("this.selArr", this.selArr);
				console.info("e", e);
			}
		}
	};
</script>
